<template>
    <div style="overflow: hidden;">
        <el-form :model="form" label-width="auto" style="max-width: 600px;display: flex;margin-top: 1px;">
            <el-form-item label="搜索内容:" class="form-item">
                <el-input v-model="form.name" placeholder="请输入" />
            </el-form-item>
            <el-form-item class="form-item">
                <el-button type="primary" class="form-serch" @click=search1>搜索</el-button>
                <el-button type="success" class="form-serch" @click=reset1>重置</el-button>
            </el-form-item>
        </el-form>
        <el-table 
        :data="tableData" 
        border 
        style="width: 100%" align="center" header-align="center" 
        :cell-style="{ textAlign: 'center' }" 
        :header-cell-style="{ 'text-align': 'center' }" 
        empty-text="当前数据为空"
        height="500"
        >
            <el-table-column prop="id" label="任务ID" width="180" />
            <el-table-column prop="code" label="源代码" />
            <el-table-column  label="操作" width="180" >
                <template #default="scope">
                    <el-button type="primary" @click="look2(scope)">查看</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination
        v-model:current-page="currentPage1"
        v-model:page-size="pageSize1"
        :page-sizes="[10, 20, 30, 40]"
        layout="total, prev, pager, next"
        :total="total1"
        @size-change="handleSizeChange1"
        @current-change="handleCurrentChange1"
        style="margin-top: 10px;
        "
        />
    </div>
    <el-dialog
    v-model="dialogVisible1"
    :title="name2"
    width="900"
    :before-close="handleClose"
  >
  <el-table 
        :data="tableData2" 
        border 
        style="width: 100%" align="center" header-align="center" 
        :cell-style="{ textAlign: 'center' }" 
        :header-cell-style="{ 'text-align': 'center' }" 
        empty-text="当前数据为空"
        height="350"
        >
            <el-table-column prop="id" label="ID" width="280" />
            <el-table-column prop="code" label="CodeType" />
            <el-table-column  label="操作" width="180" >
                <template #default="scope">
                    <el-button type="primary" @click="look3(scope)">查看</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination
        v-model:current-page="currentPage2"
        v-model:page-size="pageSize2"
        :page-sizes="[10, 20, 30, 40]"
        layout="total,sizes, prev, pager, next"
        :total="total2"
        @size-change="handleSizeChange2"
        @current-change="handleCurrentChange2"
        style="margin-top: 10px;
        "
        />    

  </el-dialog>

  <el-dialog
    v-model="dialogVisible2"
    title="代码如下："
    width="900"
    :before-close="handleClose"
  >
  <el-tree
    style="max-width: 600px"
    :data="data3"
    :props="{
        children: 'children',
        label: 'label',
    }"
    default-expand-all="true"
  />
  </el-dialog>
</template>

<script setup>
import { ref } from 'vue'
import {findPage2First,findPage2Second,findPage2Third} from '../api'
const dialogVisible1 = ref(false)
const form = ref({
    name: ''
})
const total1=ref(0)
const tableData=ref([])

const pageSize1=ref(10)
const currentPage1=ref(1)

const pageSize2=ref(10)
const currentPage2=ref(1)
const tableData2=ref()
const total2=ref(0)
const name2=ref('')
const dialogVisible2=ref(false)

const data3=ref([])
const useFindPage2First=()=>{
    findPage2First(pageSize1.value,currentPage1.value,form.value.name).then(res=>{
        tableData.value=res.data.filter(item=>item.code!='torch.set_warn_always')
        total1.value=(res.count-1)<0?0:(res.count-1)
    })   
}
useFindPage2First()

const useFindPage2Second=()=>{
    findPage2Second(pageSize2.value,currentPage2.value,name2.value).then(res=>{
        tableData2.value=res.data
        total2.value=res.count
    })  
}

const useFindPage2Third=(id)=>{
    findPage2Third(name2.value,id).then(res=>{
        data3.value[0]={label:'code_info-->'+res.data['code_info']}
        data3.value[1]={label:'document',children:[
            {label:'output_signature',children:[
                {label:'dtype-->'+res.data['document']['output_signature']['dtype']},
                {label:'shape-->'+res.data['document']['output_signature']['shape']}
            ]},
            {label:'parameter:0',children:[
                {label:'dtype-->'+res.data['document']['parameter:0']['dtype']},
                {label:'shape-->'+res.data['document']['parameter:0']['shape']}
            ]},
            {label:'parameter:1',children:[
                {label:'dtype-->'+res.data['document']['parameter:1']['dtype']},
                {label:'shape-->'+res.data['document']['parameter:1']['shape']}
            ]},
        ]}
    })
}

const handleCurrentChange1=(e)=>{
    currentPage1.value=e
    useFindPage2First()
}

const handleSizeChange1=(e)=>{
    pageSize1.value=e
    useFindPage2First()
}

const search1=()=>{
    useFindPage2First()
}

const handleCurrentChange2=(e)=>{
    currentPage2.value=e
    useFindPage2Second()
}

const handleSizeChange2=(e)=>{
    pageSize2.value=e
    useFindPage2Second()
}

const look2=(scope)=>{
    name2.value=scope.row.code
    dialogVisible1.value=true
    useFindPage2Second()
}
const look3=(scope)=>{
    dialogVisible2.value=true
    useFindPage2Third(scope.row.id)
}

const reset1=()=>{
    form.value.name=''
    pageSize1.value=10
    currentPage1.value=1
    search1()
}
</script>

<style scoped>
.form-item {
    margin-right: 40px;
}

.tag {
    width: 90vw;
    display: flex;
    flex-wrap: wrap;
}
:deep(button){
    height: 40px;
    width: 100px;
}
:deep(input) {
    height: 40px;
    width: 200px;
}

:deep(label) {
    height: 40px;
    width: 200px;
    display: flex;
    align-items: center;
}

.form-serch :deep(button) {
    height: 40px;
    width: 100px;
}
</style>